<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.3.0/web3.min.js"></script>
    <title>FirstForever App</title>

    <script type="text/javascript">
      var contractAddr = "0x7FD134E0CBD1632e9A0bEa0B9e12D5ABEF3E2D2d"
      var infuraUrl = "https://ropsten.infura.io/v3/91cb1bb696324b0d904b7e6aff00b5fd"
      var privateKey = "0x2aec87ab2752c3d99c115185cca446411b4a9a1615f0db2cf8e2f3da1501118b"

      var web3 = new Web3(infuraUrl)
      var account = web3.eth.accounts.privateKeyToAccount(privateKey)

      web3.eth.defaultChain = 'ropsten';

      var fromAddr = account.address // 0xe24cE7a12bCC59c78fE310afaDa82bD6f7848aEf"

      var abi = [{"constant":false,"inputs":[{"name":"text","type":"string"},{"name":"time","type":"uint256"}],"name":"add","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getList","outputs":[{"name":"","type":"uint256[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"time","type":"uint256"}],"name":"get","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_sender","type":"address"},{"indexed":true,"name":"_text","type":"string"},{"indexed":true,"name":"_time","type":"uint256"}],"name":"Recorded","type":"event"}]

      function timeFormatter(time) {
        return ('' + time).padStart(2, '0')
      }

      function getContract() {
        var contract = new web3.eth.Contract(abi, contractAddr)
        return contract
      }

      function viewTime() {
        var time = new Date()

        $("#currTime").val(+time)
        $(".add__time--year").html(time.getFullYear())
        $(".add__time--month").html(time.getMonth() + 1)
        $(".add__time--day").html(timeFormatter(time.getDate()))

        $(".add__time--hour").html(timeFormatter(time.getHours()))
        $(".add__time--min").html(timeFormatter(time.getMinutes()))
      }

      async function fetchList() {

        console.log("fetchList")

        var contract = getContract()

        var records = await contract.methods.getList().call({
          from: fromAddr
        })

        var len = records.length - 1
        var contents = ""

        for(var i =len; i>=0; i--){
          var item = records[i]
          var text = await contract.methods.get(item).call({
            from: fromAddr
          })

          var date = new Date(parseInt(item))

          var dateStr=`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${timeFormatter(date.getHours())}:${timeFormatter(date.getMinutes())}`

          contents += `<div class="list__record--container">
              <div class="list__record--year">${date.getFullYear()}</div>
              <span>${dateStr}</span>
              <div>${text}</div>
            </div>`
        }

        $(".list__record--page").html(contents)
      }

      $(document).ready(function() {
        viewTime()
        fetchList()

        $("#sendBtn").click(async function() {

          console.log("send msg")
          var contract = getContract()
          var text = $("#message").val()
          var _currtime = $("#currTime").val()

          var currtime = parseInt(_currtime)

          var code = contract.methods.add(text, currtime).encodeABI()

          var txCount = await web3.eth.getTransactionCount(fromAddr)

          const txObj = {
            nonce:    web3.utils.toHex(txCount),
            to:       contractAddr,
            value:    web3.utils.toHex(web3.utils.toWei('0', 'ether')),
            gasLimit: web3.utils.toHex(3000000),
            gasPrice: web3.utils.toHex(web3.utils.toWei('6', 'gwei')),
            data: code
          }

          var signedTx = await web3.eth.accounts.signTransaction(txObj, privateKey)

          var txResule = await web3.eth.sendSignedTransaction(signedTx.rawTransaction)
          console.log(txResule.transactionHash)

          alert("交易成功，交易hash：" + txResule.transactionHash)
          // https://ethereum.stackexchange.com/a/36363
          // https://github.com/ethereumjs/browser-builds/raw/master/dist/ethereumjs-tx/ethereumjs-tx-1.3.3.min.js
        })

      })
    </script>
  </head>
  <body>
    <div id="root">
      <div>
        <div class="add__content--container">
          <div class="add__time--container">
            <input type="hidden" id="currTime">
            <span class="add__time--year"></span>
            :
            <span class="add__time--month"></span>
            :
            <span class="add__time--day"></span>

            <span class="add__time--hour"></span>
            :
            <span class="add__time--min"></span>
          </div>
          <div class="add__content--prompt">
            <span>把你觉得重要的一刻，存放在链上，永远保存，随时查看</span>
          </div>
          <textarea id="message" cols="30" rows="10" class="add__content--textarea" placeholder="留下你的时光吧...">
          </textarea>
          <button id="sendBtn" class="confirm__button--primary">愿此刻永恒</button>

          <!--  -->
          <div class="list__record--page">

            <!-- <div class="list__record--container">
              <div class="list__record--year">2020</div>
              <span>2020-11-29 01:20:20</span>
              <div>11111</div>
            </div> -->

          </div>
          <!--  -->
        </div>


      </div>

    </div>
  </body>
</html>
